<template>
  <!-- 个人名片 - 个人信息 -->
  <view class="personal-info">
    <view class="info-avatar">
      <TImage :src="getAvatar" width="192rpx" height="231rpx" :preview="true" />
      <view class="advise-text">建议上传一寸照片</view>
      <button class="change-avatar" type="none" @click="changeAvatar">更换照片</button>
    </view>
    <view class="info-form">
      <view class="info-item">
        <UniEasyinput
          v-model="infoForm.name"
          type="text"
          :inputBorder="false"
          :clearable="false"
          trim="all"
          placeholder="请输入姓名"
          @blur="updateData"
        />
      </view>
      <view class="info-item">
        <UniEasyinput
          v-model="infoForm.socialPosition"
          type="text"
          :inputBorder="false"
          :clearable="false"
          trim="all"
          placeholder="请输入职务"
          @blur="updateData"
        />
      </view>
      <view class="info-item">
        <UniEasyinput
          v-model="infoForm.phone"
          type="number"
          :inputBorder="false"
          :clearable="false"
          trim="all"
          placeholder="请输入手机号"
          @blur="phoneInputBlur"
        />
        <FormSwitch v-model="isPublic.mobileDisplay" @change="updateData" />
      </view>
      <view class="info-item">
        <UniEasyinput
          v-model="infoForm.wechatId"
          type="text"
          :inputBorder="false"
          :clearable="false"
          trim="all"
          placeholder="请输入微信号"
          @blur="updateData"
        />
        <FormSwitch v-model="isPublic.wechatIdDisplay" @change="updateData" />
      </view>
      <view class="info-item">
        <UniEasyinput
          v-model="infoForm.email"
          type="text"
          :inputBorder="false"
          :clearable="false"
          placeholder="请输入邮箱"
          @blur="updateData"
        />
        <FormSwitch v-model="isPublic.emailDisplay" @change="updateData" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType, reactive, unref, watch } from 'vue';

  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { useUpload } from '@/hooks/core/useUpload';
  import { phoneReg } from '@/utils/Reg';
  import { Toast } from '@/utils';
  import FormSwitch from '@/components/Form/components/FormSwitch.vue';
  import TImage from '@/components/TImage/index.vue';

  const EmptyAvatar =
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/emptyIcon/empty-avatar.png';

  export interface PersonalInfoData {
    name: string;
    socialPosition: string;
    phone: string;
    wechatId: string;
    email: string;
    avatar: string;
    wechatIdDisplay: number;
    mobileDisplay: number;
    emailDisplay: number;
  }
  const props = defineProps({
    personalInfo: Object as PropType<PersonalInfoData>,
  });

  watch(
    () => props.personalInfo,
    (val) => {
      if (val) {
        infoForm.name = val.name;
        infoForm.socialPosition = val.socialPosition;
        infoForm.phone = val.phone;
        infoForm.wechatId = val.wechatId;
        infoForm.email = val.email;
        infoForm.avatar = val.avatar;
        isPublic.mobileDisplay = !!val.mobileDisplay;
        isPublic.wechatIdDisplay = !!val.wechatIdDisplay;
        isPublic.emailDisplay = !!val.emailDisplay;
      }
    },
    {
      deep: true,
    },
  );

  const emit = defineEmits(['update:personalInfo']);

  const infoForm = reactive({
    name: '',
    socialPosition: '',
    phone: '',
    wechatId: '',
    email: '',
    avatar: '',
  });

  const isPublic = reactive({
    mobileDisplay: false,
    wechatIdDisplay: false,
    emailDisplay: false,
  });

  const { result, chooseFile, delResultItem } = useUpload({
    count: 1,
    isCrop: true,
    cropOptions: {
      width: 640,
      height: 800,
    },
  });

  const getAvatar = computed(() => {
    let bigImg = result.value[0]?.filePath ?? '';
    if (bigImg) {
      infoForm.avatar = bigImg;
      updateData();
    }
    return result.value[0]?.tempFilePath || infoForm.avatar || EmptyAvatar;
  });

  /** 更改头像 */
  function changeAvatar() {
    delResultItem(0);
    chooseFile({ mediaType: 'image' });
  }

  function updateData() {
    emit('update:personalInfo', {
      ...unref(infoForm),
      ...getIsPublic(),
    });
  }

  function getIsPublic() {
    const obj = {
      mobileDisplay: 0,
      wechatIdDisplay: 0,
      emailDisplay: 0,
    };
    for (const key in obj) {
      const k = key as keyof typeof obj;
      obj[k] = isPublic[k] ? 1 : 0;
    }
    return obj;
  }

  /** 验证手机号 */
  function phoneInputBlur({ detail: { value } }: any) {
    if (value && !phoneReg.test(value)) {
      Toast('请输入正确的手机号');
      infoForm.phone = '';
    } else {
      updateData();
    }
  }
</script>

<style lang="scss" scoped>
  .personal-info {
    display: flex;
    padding-top: 30rpx;
    .info-avatar {
      width: 192rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 24rpx;
      .change-avatar {
        color: #333;
        font-size: 24rpx;
        border: 1px solid #dddddd;
        margin: 20rpx 0;
        width: 120rpx;
        height: 45rpx;
        line-height: 45rpx;
      }
      .advise-text {
        color: #808080;
        font-size: 24rpx;
        margin-top: 15rpx;
      }
    }
    .info-form {
      flex: 1;
      .info-item {
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
</style>
